<template>
  <div class="basic-line-container" ref="echarts_instance"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Ref, Watch, Prop, Emit } from 'vue-property-decorator'
import * as echarts from 'echarts'
import { Getter } from 'vuex-class'
import { Dictionary } from 'vue-router/types/router'
type EchartsOptions = echarts.EChartsOption
type PieDataType = {
  name: string
  value: number
}[]
@Component
class BasicPie extends Vue {
  @Getter('theme') theme!: 'dark' | 'light'
  @Ref() echarts_instance!: HTMLElement
  @Prop({ required: true }) pieData!: PieDataType
  @Prop({ required: true }) selected!: string[]
  myChart: echarts.ECharts | null = null
  get SelectedLegend() {
    const result: Dictionary<boolean> = {}
    this.pieData
      .map(series => series.name)
      .forEach(item => {
        result[item] = false
      })
    if (this.selected && this.selected.length !== 0) {
      this.selected.forEach(item => {
        result[item] = true
      })
    }
    return result
  }
  @Watch('theme')
  theme_handler() {
    this.initEcharts()
  }
  @Watch('pieData')
  data_handler() {
    this.initEcharts()
  }
  mounted() {
    this.myChart = echarts.init(this.echarts_instance)
    this.myChart.on('legendselectchanged', params => {
      this.onSelectedChange(params)
    })
    this.initEcharts()
  }
  initEcharts() {
    if (!this.myChart) return
    const echartsOption: EchartsOptions = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          align: 'left',
          fontSize: 12
        }
      },
      legend: {
        top: 'middle',
        left: '5%',
        orient: 'vertical',
        selected: this.SelectedLegend,
        textStyle: {
          color: this.theme === 'dark' ? '#ffffff' : '#555555'
        }
      },
      series: [
        {
          type: 'pie',
          radius: [15, 60],
          center: ['70%', '50%'],
          roseType: 'area',
          label: {
            position: 'inside',
            formatter: '{c}'
          },
          labelLine: {
            length: 5,
            length2: 5
          },
          itemStyle: {
            // color: params => {
            //   const { name } = params
            //   const default_wrapper_light_color: Dictionary<string> = {
            //     // white
            //     '': '#5584B0',
            //     未完成: '#5584B0',
            //     // green
            //     已完成: '#00BAAD',
            //     合格: '#00BAAD',
            //     // yellow
            //     异常继续: '#FCDF2D',
            //     让步放行: '#FCDF2D',
            //     // red
            //     不合格: '#EE2D42',
            //     异常停止: '#EE2D42',
            //     // gray
            //     关闭: '#ECECEC'
            //   }
            //   const default_wrapper_dark_color: Dictionary<string> = {
            //     '': '#5584B0',
            //     未完成: '#5584B0',
            //     已完成: '#18D9CF',
            //     合格: '#18D9CF',
            //     异常继续: '#FCDC33',
            //     让步放行: '#FCDC33',
            //     异常停止: '#D00412',
            //     不合格: '#D00412',
            //     关闭: '#DEDEDE'
            //   }
            //   return this.theme === 'dark' ? default_wrapper_dark_color[name] : default_wrapper_light_color[name]
            // },
            borderRadius: 2
          },
          data: this.pieData
        }
      ],
      textStyle: {
        color: this.theme === 'dark' ? '#ffffff' : '#555555'
      }
    }
    this.myChart.setOption(echartsOption)
    this.myChart.resize()
    window.addEventListener('resize', () => {
      if (!this.myChart) return
      this.myChart.resize()
    })
  }
  @Emit()
  onSelectedChange(params: unknown) {
    const { selected } = params as { selected: Dictionary<boolean> }
    const result: string[] = []
    for (const proper in selected) {
      if (selected[proper]) result.push(proper)
    }
    return result
  }
}
export default BasicPie
</script>

<style lang="less" scoped>
.basic-line-container {
  width: 100%;
  height: 100%;
}
</style>
